<template>
  <div class="City">
    <c-title :hide="false" text="定位"></c-title>
    <div class="classify-search  flex-j-sb">
      <div class="search-left">
        <input v-model="search" placeholder="输入城市名称快速查询" @input="searchCity" />
        <div class="iconfont icon-sousuo1"></div>
      </div>
    </div>
    <van-list v-if="searchFlag" @scroll.prevent>
      <van-cell v-for="(item, index) in matching" :key="index" :title="item.city" @click="searchSites(item.city, item.cityCode)" />
    </van-list>
    <city-list v-if="cityArr.length > 0" :cityArr="cityArr" :hot="matching" :cityName="cityName" :hostCities="hostCities"></city-list>
  </div>
</template>
<script>
import tourCityList from "./tourCityList.js";
export default tourCityList;
</script>
<style scoped>
.City ::v-deep .van-list {
  top: 5.625rem;
  width: 23.4375rem;
  height: 100%;
  bottom: 0;
  overflow-y: scroll;
  position: absolute;
  background-color: #fff;
  z-index: 10;
}

.City ::v-deep .van-list__placeholder {
  height: 5.625rem;
}

.City ::v-deep .van-list::before {
  content: "";
  height: 5.625rem;
  position: relative;
}

.City ::v-deep .van-list .van-cell {
  text-align: left;
}
</style>
<style lang="scss" scoped>
.classify-search {
  position: relative;
  padding: 0.625rem 0.9375rem 0.3125rem 1.0625rem;
  background-color: #fff;

  .search-left {
    position: relative;

    input {
      width: 21.25rem;
      padding-left: 2.5rem;
      height: 1.875rem;
      background: #fff;
      border: 0.0625rem solid var(--themeBaseColor);
      border-radius: 0.9375rem;
      position: relative;
    }

    .search-btn {
      font-size: 0.6875rem;
      font-weight: 400;
      color: #fff;
      padding: 0.3125rem 0.75rem;
      border-radius: 0.75rem;
      background-color: #ffc11e;
      position: absolute;
      top: 0.1875rem;
      right: 0.25rem;
    }

    .icon-sousuo1 {
      color: var(--themeBaseColor);
      position: absolute;
      top: 0.375rem;
      left: 1rem;
    }
  }
}
</style>
